<template>
  <div class="error-mask" :class="{fixed:fixed}">
    <section>
      <div class="content">
        <p v-html="message"></p>
        <div class="pt10">
        <van-button type="danger" size="small" block @click="retry">{{$t(`重试`)}}</van-button>
      </div>
      </div>
    </section>
    
  </div>
</template>

<script>
export default {
  props: {
    message:String,
    fixed:{
      type:Boolean,
      default:false
    }

  },
  setup(props, ctx){
    function retry(){
      ctx.emit('retry')
    }
    return {
      retry
    }
  }
}
</script>

<style lang="less" scoped>
.error-mask{
  position: absolute;
  left: 0;
  top: 0;
  right:0;
  bottom:0;
  background-color:rgba(0,0,0,.32);
  z-index:1;
  &.fixed {
    position: fixed;
  }
  section {
    margin: 0.1rem;
    height: calc(100% - 0.2rem;);
    overflow-y: auto;
    line-height: 1.5;
    color: #FFF;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    p {word-break: break-all;}
  }
}
</style>
